<template>
	<view class="container">
		<view class="addBox mb20" @click="open">
			<image src="../../static/images/icon_add.png" mode="aspectFit"></image>
			<view class="text f32">添加新分类</view>
		</view>
		<!-- 全部分类 -->
		<view class="classify">
			<view class="tit f32 c333">全部分类</view>

			<uni-swipe-action>
				<uni-swipe-action-item :options="options" @click="onClick(item.category_id)" v-for="(item, index) in CategoryList" :key="index">
					<view class="select-item" @tap="chooseCategory(item.category_id, item.name)">
						<view class="name f30 c333" >{{ item.name }}</view>
						<view class="arrow" @tap.stop="edit(item.category_id, item.name,'edit')"><image src="../../static/images/icon_select.png" mode="aspectFit"></image></view>
					</view>
				</uni-swipe-action-item>
			</uni-swipe-action>

			<!-- 	
			<view class="select-item" v-for="(item,index) in CategoryList" :key="index" >
				<view class="name f30 c333" @tap="chooseCategory(item.category_id,item.name)">{{item.name}}</view>
				<view class="arrow" @tap.top="open"><image src="../../static/images/icon_select.png" mode="aspectFit"></image></view>
			</view> -->
		</view>

		<!-- 添加分类弹窗 -->
		<uni-popup ref="popup" type="center">
			<view class="addContent">
				<view class="box">
					<view class="tit tCenter f36 c333">请输入分类名称</view>
					<view class="input-box"><input type="text" placeholder="请输入分类名称" v-model="inputName" /></view>
					<view class="btn f30 tCenter">
						<view class="dropBtn" @click="close">取消</view>
						<view class="submit" @click="define()">确定</view>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
import uniSwipeAction from '@/components/uni-swipe-action/uni-swipe-action.vue';
import uniSwipeActionItem from '@/components/uni-swipe-action-item/uni-swipe-action-item.vue';
import uniPopup from '@/components/uni-popup/uni-popup.vue';
export default {
	components: {
		uniSwipeAction,
		uniSwipeActionItem,
		uniPopup
	},
	data() {
		return {
			CategoryList: [],
			type: '',
			id:'',
			name: '', //分类名称
			inputName:'',
			index: 0, //给第几个分类修改
			options: [
				{
					text: '删除',
					style: {
						backgroundColor: '#fe6e65'
					}
				}
			]
		};
	},
	onLoad() {
		this.getCategoryList();
	},
	methods: {
		edit(id,name,edit) {
			this.$refs.popup.open();	
			this.id=id;
			this.name=name,
			this.type=edit
		},
		open() {
			this.$refs.popup.open();
		},
		define() {
			let that = this;
	         if(that.type=='edit'){
				that.$ajax('api/v2.goods/categoryEdit',{
					name:that.inputName,
					category_id:that.id
				}).then(res=>{
					if(res.code==1){
						console.log(111)
						that.$sToast('修改成功')
						that.getCategoryList();
					}
				}).catch(res=>{
					that.$sToast(res.message)
				}) 
			 }else{
				 that.$ajax('api/v1.goods/categoryAdd', {
				 	name: that.inputName
				 })
				 	.then(res => {
				 		that.$refs.popup.close();
				 		that.$sToast('添加成功');
				 		that.getCategoryList();
				 	})
				 	.catch(res => {
				 		that.$sToast(res.message);
				 	});
			 }
			this.$refs.popup.close();
		},
		close() {
			this.$refs.popup.close();
		},

		getCategoryList() {
			let that = this;
			that.$ajax('api/v1.goods/categoryList', {}, 'GET')
				.then(res => {
					if (res.code == 1) {
						that.CategoryList = res.result;
					}
				})
				.catch(res => {
					that.$sToast(res.message);
				});
		},
		chooseCategory(id, name) {
			// uni.navigateTo({
			// 	url: './productInfo?id=' + id + '&name=' + name
			// });
			uni.setStorageSync('id',id)
			uni.setStorageSync('name',name)
			this.$back()
		},
		//分类删除
		onClick(id) {
			let that = this;
			that.$ajax('api/v1.goods/categoryDel', {
				category_id: id
			})
				.then(res => {
					if (res.code == 1) {
						that.$sToast('分类删除');
						setTimeout(function() {
							that.getCategoryList();
						}, 1500);
					}
				})
				.catch(res => {
					that.$sToast(res.message);
				});
		}
	}
};
</script>

<style lang="scss">
page {
	background-color: #f7f4f8;
}

.addBox {
	display: flex;
	flex-direction: row;
	align-items: center;
	background-color: $white-background;
	padding: 25upx 30upx 25upx 30upx;
	image {
		width: 40upx;
		height: 40upx;
		margin-right: 20upx;
	}
	.text {
		color: #249af6;
	}
}
// 全部分类
.classify {
	background-color: $white-background;
	padding: 30upx 0 100upx 0;
	.tit {
		border-bottom: 2upx #eee solid;
		padding: 0 30upx 35upx 30upx;
	}
	.select-item {
		width: 100%;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		border-bottom: 2upx #eee solid;
		padding: 0 30upx 30upx;
		margin-top: 35upx;
		.arrow {
			width: 38upx;
			height: 38upx;
			image {
				width: 38upx;
				height: 38upx;
			}
		}
	}
}
</style>
